<template>
  <el-container>
    <el-header>
  	<el-col style="font-size: x-large;">管理系统</el-col>
      <div class="welcome">
        <span>欢迎你，{{usermessage.uname}}</span>
        <el-button @click="logout">退出</el-button>
      </div>



    </el-header>
    <el-container>
      <el-aside width="200px">
  		<el-row class="tac">
  			<el-col>
            <el-menu v-for="(menu,index) in menus" :key="index">
              <el-submenu index="1" v-if="menu.menuIsleafnode==0">
                <template slot="title">
                  <i :class="menu.menuIcon"></i>
                  <span>{{menu.menuName}}</span>
                </template>
                <el-menu-item-group v-for="(cmenu,cindex) in menu.children" :key="cindex">
                  <el-menu-item><router-link :to="cmenu.menuRouter">{{cmenu.menuName}}</router-link></el-menu-item>
                </el-menu-item-group>
            </el-submenu>
            <el-menu-item index="3" v-if="menu.menuIsleafnode==1">
              <i :class="menu.menuIcon"></i>
              <router-link :to="menu.menuRouter">{{menu.menuName}}</router-link>
            </el-menu-item>
            </el-menu>
  			</el-col>
  		</el-row>
  	</el-aside>
      <el-main><router-view></router-view></el-main>
    </el-container>
  </el-container>
</template>

<script>
export default {
    data(){
    	return{
    		menus:[],
        usermessage:{}
    	}
    },
    created() {
      this.getMenu()
      this.getMessage()
    },
    methods:{
      getMessage(){
        this.$axios.post("/user/getmessage").then(resp=>{
          console.log(resp)
          if(resp.data.flag){
            this.usermessage=resp.data.data
            sessionStorage.setItem("user",window.JSON.stringify(resp.data.data))
          }else{
            this.usermessage.uname=resp.data.message
          }



        })
      },
      getMenu(){
        this.$axios.post("/menuModel/getmenu").then(resp=>{
          console.log(resp)
          this.menus=resp.data.data
        })
      },
      logout(){
        sessionStorage.removeItem("aid")
        this.$axios.get("/logout").then(resp => {
          console.log(resp)
          this.$router.push("/login")
        })

      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .welcome{
    text-align: right;
  }
</style>
